<template>
	<div style="width: 100%; height: 100%; position: relative;">
		<div class="container">
			<div class="container-title">
				<div class="container-title-text">
					壁纸标签列表
				</div>
				<el-button class="container-title-btn1" type="primary">添加</el-button>
				<el-button class="container-title-btn1" type="primary">add</el-button>
			</div>
			<div class="container-cont">
				<el-table :data="tags" border style="width: 100%">
					<el-table-column align="center" prop="create_date" label="日期" width="180" sortable>
					</el-table-column>
					<el-table-column align="center" prop="_id" label="id" width="240">
					</el-table-column>
					<el-table-column align="center" prop="type_id" label="id" width="240">
					</el-table-column>
					<el-table-column align="center" prop="name" label="标签名" width="100">
						<template slot-scope="scope">
							<el-tag type="success" disable-transitions>{{scope.row.name}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="tag_cd" sortable label="热度"
						:filters="[{text: 0, value: 0},{text: 1, value: 1},{text: 2, value: 2},{text: 3, value: 3}]"
						:filter-method="filterHandler" width="100">
					</el-table-column>
					<el-table-column align="center" prop="state" label="状态" width="100"
						:filters="[{text: true, value: true},{text: false, value: false},{text: 2, value: 2},{text: 3, value: 3}]"
						:filter-method="filterHandler">
						<template slot-scope="scope">
							<el-tag :type="scope.row.state == true ? 'success' : 'info'"
								disable-transitions>{{scope.row.state==true ? '开启' : "关闭"}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<transition name="el-fade-in-linear">
				<div v-show="show" class="mask">
					<div class="mask-box">
						<div class="mask-box-title">壁纸标签</div>
						<div class="mask-box-name">
							<el-form ref="form" :model="form" label-width="80px">
								<el-form-item label="name:" prop="name">
									<el-input style="width: 200px;" maxlength="10" show-word-limit
										v-model="form.name"></el-input>
								</el-form-item>
								<el-form-item label="热度:" prop="name">
									<el-input style="width: 200px;" maxlength="10" show-word-limit
										v-model="form.tag_cd"></el-input>
								</el-form-item>
								<el-form-item label="类型分类:" prop="type">
									<el-select v-model="form.type_id" placeholder="请选择类型分类">
										<el-option v-for="(item,n) in types" :label="item.name"
											:value="item._id"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="是否启动">
									<el-switch v-model="form.state"></el-switch>
								</el-form-item>
								<el-card class="box-card" shadow="never" style="">
									<div slot="header" class="clearfix">
										<span>上传壁纸</span>
									</div>
									<div>
										<ul class="ny-upload-ul">
											<li>
												<div>
													<img :src="icon_url" alt="" />
													<span class="ny-upload-span">
														<span @click="handlePictureCardPreview()"
															class="ny-upload-span-itam1"><i
																class="el-icon-zoom-in"></i></span>
														<span @click="icon_url=''" class="ny-upload-span-itam2"><i
																class="el-icon-delete"></i></span>
													</span>
												</div>
											</li>
										</ul>
										<div class="ny-upload-img" @click="uploaD">
											<i data-v-293d3606 class="el-icon-plus"></i>
										</div>
										<el-dialog :visible.sync="dialogVisible">
											<img width="100%" :src="icon_url" alt="">
										</el-dialog>
									</div>
								</el-card>
							</el-form>
						</div>

						<div class="mask-box-btn">
							<div class="mask-box-btn-btn1">
								<el-button @click="addclick()" class="" type="primary">确定</el-button>
							</div>
							<div class="mask-box-btn-btn2">
								<el-button @click="show=false" class="" type="info">取消</el-button>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>
		<ny-mask v-show="show1"></ny-mask>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				tags: [],
				types: [],
				type_id: '',
				show: false,
				show1: false,
				tag_cd: '',
				index: -1,
				_id: '',
				icon_url: '',
				form: {
					_id: '',
					tag_cd: '',
					type_id: '',
					state: false,
					icon: ''
				},
				dialogVisible: false,
				istrue: false
			};
		},
		mounted() {
			this.getTag()
		},
		created() {
			let that = this
			let col = uniCloud.importObject('ny102Type', {
				customUI: true
			})
			col.getTypes().then(res => {
				console.log(res)
				that.types = res.data
			})
		},
		methods: {
			handlePictureCardPreview(file) {
				this.icon_url = file;
				this.dialogVisible = true;
			},
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},
			handleClose(tag) {
				console.log(tag)
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},
			handleEdit(e) {
				console.log(e)
				this.form.name = e.name
				this.form.tag_cd = e.tag_cd
				this.form._id = e._id
				this.form.type_id = e.type_id
				this.form.name = e.name
				this.icon_url = e.icon
				if (e.state) {
					this.form.state = e.state
				} else {
					this.form.state = false
				}
				this.show = true
			},
			addclick() {
				this.show1 = true
				// 修改标签
				let col = uniCloud.importObject('ny102Tags', {
					customUI: true
				})
				const that = this
				this.uploadFileImg(this.icon_url)
				var timer = setInterval(() => {
					if (that.istrue) {
						col.updateTag(that.form._id, {
							"tag_cd": that.form.tag_cd - 0,
							"type_id": that.form.type_id,
							"state": that.form.state,
							"icon": that.form.icon
						}).then((res) => {
							that.getTag()
							console.log(res)
							that.show = false
							clearInterval(timer)
							this.show1 = false
						})
					}
				}, 1000)
			},
			uploaD(item) {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					success(res) {
						for (let i = 0; i < res.tempFilePaths.length; i++) {

							let filePath = res.tempFilePaths[i] // 选择图片的临时路径

							let name = 'NY' // 选择图片的名称.后缀名
							var handleImage = function(imgSrc) {
								// 创建一个Image对象
								var img = new Image();
								img.src = imgSrc;
								// 定义图片加载完成时的处理函数
								var onLoadHandler = function() {
									// 移除事件监听器，确保只执行一次
									img.removeEventListener('load', onLoadHandler);
									// 创建一个Canvas元素
									var canvas = document.createElement('canvas');
									var ctx = canvas.getContext('2d');
									// 设置Canvas的尺寸
									var maxWidth = 200; // 设置最大宽度
									var maxHeight = 200; // 设置最大高度
									var imgWidth = img.width;
									var imgHeight = img.height;
									canvas.width = imgWidth;
									canvas.height = imgHeight;
									// 在Canvas上绘制图片
									ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
									// 将Canvas中的图片转换为DataURL
									var compressedDataURL = canvas.toDataURL('image/jpeg',
										0.8); // 压缩质量为0.8
									console.log(compressedDataURL)
									// 输出压缩后的DataURL
									// console.log('压缩后的图片DataURL：', compressedDataURL);

									// 调用上传的接口
									that.icon_url = compressedDataURL
									// that.shrink_url.name = `${name}_${result}shrink`
									// that.uploadFileImg(compressedDataURL)
								}
								// 监听图片加载完成事件
								img.addEventListener('load', onLoadHandler);
							}
							handleImage(filePath);
						}
					}

				});
			},
			uploadFileImg(filePath) {
				let result = '';
				const characters =
					'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				for (let i = 0; i < 4; i++) {
					result += characters.charAt(Math.floor(Math.random() * characters.length));
				}
				let that = this
				uniCloud.uploadFile({
					filePath: filePath, //要上传的文件对象
					cloudPath: `ny102/tag_icon/${that.form.name}-${result}.png`,
					cloudPathAsRealPath: true,
					success(res) {
						let imageUrl = res.fileID //云端返回的图片地址
						console.log(imageUrl)
						that.form.icon = imageUrl
						that.istrue = true
						uni.showToast({
							title: '壁纸添加成功！！',
							duration: 1000
						});
					},
					fail(err) {
						console.log(err)
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			// 时间戳转换 
			timestampToYMDHMS(timestamp) {
				const date = new Date(timestamp);
				const year = date.getUTCFullYear();
				const month = ('0' + (date.getUTCMonth() + 1)).slice(-2); // 月份是从0开始的
				const day = ('0' + date.getUTCDate()).slice(-2);
				const hours = ('0' + date.getUTCHours()).slice(-2);
				const minutes = ('0' + date.getUTCMinutes()).slice(-2);
				const seconds = ('0' + date.getUTCSeconds()).slice(-2);
				return `${year}-${month}-${day}`;
			},
			// 获取
			getTag() {
				this.tags = []
				let col = uniCloud.importObject('ny102Tags', {
					customUI: true
				})
				col.getTags().then((res) => {
					console.log(res.data)
					res.data.map((n, m) => {
						let date = this.timestampToYMDHMS(n.create_date)
						this.tags.push({
							...n,
							"create_date": date
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 97%;
		overflow-y: auto;
		overflow-x: hidden;

		.mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 5;
			display: flex;
			justify-content: center;
			align-items: center;

			.mask-box {
				width: 100%;
				height: 100%;
				background-color: #fff;
				position: relative;

				.box-card {
					width: 95%;
					margin: 0 auto;
					margin-top: 10px;
					margin-bottom: 20px;

					.select-tag {
						margin-top: 20px;
						width: 100%;
						min-height: 50px;

						.el-tag+.el-tag {
							margin-left: 10px;
						}

						.button-new-tag {
							margin-left: 10px;
							height: 32px;
							line-height: 30px;
							padding-top: 0;
							padding-bottom: 0;
						}

						.input-new-tag {
							width: 90px;
							margin-left: 10px;
							vertical-align: bottom;
						}
					}

					.ny-card-itam {
						position: relative;
						width: 208px;
						height: 74px;

						image {
							position: absolute;
							width: 100%;
							height: 100%;
						}
					}

					.ny-upload-ul {
						margin: 0;
						display: inline;
						vertical-align: top;

						li {
							overflow: hidden;
							background-color: #fff;
							border: 1px solid #c0ccda;
							border-radius: 6px;
							box-sizing: border-box;
							width: 148px;
							height: 148px;
							margin: 0 8px 8px 0;
							display: inline-block;

							div {
								width: 100%;
								height: 100%;
								display: block;
								unicode-bidi: isolate;
								position: relative;

								img {
									width: 100%;
								}

								.ny-upload-span:hover {
									opacity: 1;
								}

								.ny-upload-span {
									position: absolute;
									width: 100%;
									height: 100%;
									left: 0;
									top: 0;
									cursor: default;
									text-align: center;
									color: #fff;
									opacity: 0;
									font-size: 20px;
									background-color: rgba(0, 0, 0, .5);
									transition: opacity .3s;
									line-height: 148px;

									.ny-upload-span-itam1 {
										cursor: pointer;
										padding: 0 10px;
									}

									.ny-upload-span-itam2 {
										padding: 0 10px;
										cursor: pointer;
									}
								}
							}

						}
					}

					.ny-upload-img {
						display: inline-block;
						background-color: #fbfdff;
						border: 1px dashed #c0ccda;
						border-radius: 6px;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						width: 148px;
						height: 148px;
						cursor: pointer;
						line-height: 146px;
						vertical-align: top;
						position: relative;
						text-align: center;
						color: #8c939d;
						font-size: 26px;
					}

					.ny-upload-img:hover {
						border-color: #409EFF;
						color: #409EFF;
					}
				}

				.icon-box {
					transition: all .4s;
					width: 552px;
					height: 450px;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					background-color: #fff;
					border: 1px solid #409EFF;
					padding: 10px;
					overflow-x: hidden;
					overflow-y: auto;

					.icon-box-btn {
						position: absolute;
						width: 552px;
						height: 50px;
						background-color: #fff;
						bottom: 0;

						.icon-box-btn-btn1 {
							position: absolute;
							width: 70px;
							height: 40px;
							left: 200px;
							top: 5px;
						}

						.icon-box-btn-btn2 {
							position: absolute;
							width: 70px;
							height: 40px;
							right: 200px;
							top: 5px;
						}
					}

					.icon-box-itam {
						width: 90px;
						height: 90px;
						border: 1px solid gainsboro;
						box-sizing: border-box;
						float: left;
						margin: 1px;
						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;

						img {
							width: 90%;
						}
					}

					.icon-box-itam:hover {
						background-color: #f9f9f9;
					}
				}

				.mask-box-title {
					width: 100%;
					height: 60px;
					background-color: #f9f9f9;
					line-height: 60px;
					text-align: center;
					font-size: 14px;
				}

				.mask-box-name {
					width: 80%;
					height: 60px;
					margin-left: 10%;
					margin-top: 20px;

					.el-form-item__label {
						width: 80px;
					}
				}

				.mask-box-icon {
					width: 80%;
					height: 60px;
					margin-left: 10%;
					margin-top: 20px;
				}

				.mask-box-btn {
					position: absolute;
					width: 100%;
					height: 50px;
					bottom: 20px;

					.mask-box-btn-btn1 {
						position: absolute;
						width: 70px;
						height: 40px;
						left: 200px;
						top: 5px;
					}

					.mask-box-btn-btn2 {
						position: absolute;
						width: 70px;
						height: 40px;
						right: 200px;
						top: 5px;
					}
				}
			}
		}

		.container-title {
			width: 100%;
			height: 60px;
			background-color: #fff;
			border-radius: 5px 5px 0 0;

			.container-title-text {
				float: left;
				width: 100px;
				height: 60px;
				line-height: 60px;
				font-size: 14px;
				margin-left: 30rpx;
			}

			.container-title-btn1 {
				float: right;
				margin-right: 40px;
				height: 30px;
				width: 70px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 15px;
				font-size: 12px;
			}
		}

		.container-cont {
			width: 100%;
			height: calc(100% - 60px - 20px);
			background-color: #fff;
			margin-top: 20px;
		}

	}
</style>